<template>
  <view
    class="slide-show-page"
    @click="click"
  >
    <u-skeleton
      rows="1"
      :loading="loading"
      :title="false"
			rowsHeight="300rpx"
    >
      <u-swiper
        :list="topList.image"
				:indicator="true"
				indicatorMode="dot"
				height="300rpx"
				:circular="true"
        @change="(e) => (currentTop = e.current)"
      ></u-swiper>
    </u-skeleton>
    <view
      v-if="topList.image"
      class="center-view"
    >
      <u--text
        :text="topList.top[currentTop].name"
        size="24"
        color="white"
        align="center"
      ></u--text>
      <u-tag
        v-if="topList.top[currentTop].area"
        :text="topList.top[currentTop].area"
        type="primary"
        shape="circle"
				size="mini"
      ></u-tag>
    </view>
  </view>
</template>

<script>
  import { isEmpty } from "lodash";

  export default {
    name: "SlideShow",
    props: {
      /**
       * top3数据
       */
      topList: {
        type: Object,
        default() {
          return {
            top: [{ name: "", area: "" }],
            image: [],
          };
        },
        required: true,
      },
    },
    data() {
      return {
        /**
         * 当前轮播图index
         * @type int
         */
        currentTop: 0,
      };
    },
    computed: {
      /**
       * 当topList为空时，显示加载条
       */
      loading() {
        if (
          isEmpty(this.topList.top) ||
          isEmpty(this.topList.top[0]?.name) ||
          isEmpty(this.topList.top[0]?.area) ||
          isEmpty(this.topList.image)
        ) {
          return true;
        }
        return false;
      },
    },
    methods: {
      click(item) {
        // TODO 点击后跳转到专家详情
      },
    },
  };
</script>

<style>
  .slide-show-page {
    position: relative;
		margin: 0 var(--margin-mini);
  }

  .center-view {
    display: flex;
    justify-content: center;
    align-items: center;
		gap: var(--margin-mini);
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>
